<template>
    <div>
        <el-row style="margin-top: 20px">
            <el-col :span="6" :offset="4" align="right">
                <span>开始时间：</span>
                <el-date-picker
                        v-model="startDate"
                        type="date"
                        size="medium"
                        :picker-options="pickerOptions"
                        style="width: 150px;margin-right: -10px"
                        placeholder="选择日期">
                </el-date-picker>
            </el-col>
            <el-col :span="6" align="right">
                <span>结束时间：</span>
                <el-date-picker
                        v-model="endDate"
                        type="date"
                        size="medium"
                        :picker-options="pickerOptions"
                        style="width: 150px;margin-right: -10px"
                        placeholder="选择日期">
                </el-date-picker>
            </el-col>
            <el-col :span="5" align="right">
                <span>类型：</span>
                <diySelect :optionData="typeOptionData" size="medium" :propsValue="type"
                           @choose="chooseType"></diySelect>

            </el-col>
            <el-col :span="3" align="right">
                <el-button
                        @click="searchSales"
                        icon="el-icon-search"
                        size="medium"
                        type="primary">
                    搜索
                </el-button>
            </el-col>

        </el-row>
        <el-row style="margin-top: 20px">

            <el-col id="eChart" style="width: 100%;min-height: 380px">

            </el-col>

        </el-row>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'

    export default {
        name: "restaurantBusinessPage",
        computed: {
            startTime: {
                get: function () {
                    let yy = this.startDate.getFullYear()
                    let mm = (this.startDate.getMonth() + 1) < 10 ? '0' + (this.startDate.getMonth() + 1) : (this.startDate.getMonth() + 1)
                    let dd = this.startDate.getDate() < 10 ? '0' + this.startDate.getDate() : this.startDate.getDate()
                    return yy + '-' + mm + '-' + dd
                },
                set: function () {

                }
            },
            endTime: {
                get: function () {
                    let yy = this.endDate.getFullYear()
                    let mm = (this.endDate.getMonth() + 1) < 10 ? '0' + (this.endDate.getMonth() + 1) : (this.endDate.getMonth() + 1)
                    let dd = this.endDate.getDate() < 10 ? '0' + this.endDate.getDate() : this.endDate.getDate()
                    return yy + '-' + mm + '-' + dd
                },
                set: function () {

                }
            },
        },
        created() {
            this.getTime()
        },
        mounted() {
            this.searchSales()
        },
        data() {
            return {
                startDate: new Date(new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000).toDateString()),
                endDate: new Date(new Date().toDateString()),


                type: 0,
                currentPage: 1,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()  //设置只能选择今天之前的日期
                    },
                },
                // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                date: '',
                eChartXData: [],
                // eChartXData: ["香蕉", "苹果", "雪梨", "水蜜桃", "哈密瓜", "榴莲", "猕猴桃", "西瓜", "圣女果"],
                // eChartYData: [20, 36, 10, 10, 20, 66, 45, 32, 46],
                eChartYData: [],
                typeOptionData: [{
                    value: 0,
                    label: '翻桌'
                }, {
                    value: 1,
                    label: '菜品',
                }, {
                    value: 2,
                    label: '消耗品'
                }, {
                    value: 3,
                    label: '年龄段'
                }, {
                    value: 4,
                    label: '性别'
                }],


            }
        },
        methods: {
            ...mapActions(['searchSalesAct', 'getTime']),

            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('eChart'))
                // 绘制图表
                myChart.setOption({
                    title: {text: '销量统计图'},
                    tooltip: {},
                    itemStyle: {
                        // 设置扇形的颜色
                        color: '#409EFF',
                    },
                    legend: {
                        data: ['销量']
                    },
                    xAxis: {
                        data: this.eChartXData,
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        // data: [5, 20, 36, 10, 10, 20],
                        data: this.eChartYData,
                    }]
                });
            },
            /*数据转换*/
            exchangeData(data) {
                let nameArr = []
                let numberArr = []
                for (let item of data) {
                    nameArr.push(item.name)
                    numberArr.push(item.number)
                }
                this.eChartXData = nameArr;
                this.eChartYData = numberArr;
            },
            /*搜索*/
            searchSales() {
                // this.eChartXData = ["香蕉", "苹果", "水蜜桃", "哈密瓜", "榴莲", "火龙果"];
                // this.eChartYData = [10, 20, 90, 45, 32, 46],
                console.log(this.startDate);
                console.log(this.endDate);
                if (!(this.startDate && this.endDate)) {
                    this.$message({
                        message: '请选择时间区间',
                        center: true,
                    })

                } else if (this.startDate >= this.endDate) {
                    this.$message({
                        message: '结束时间应大于开始时间',
                        center: true,
                    })
                } else {
                    let obj = {
                        pageSize: 50,
                        startTime: this.startTime,
                        endTime: this.endTime,
                        type: this.type,
                        currentPage: this.currentPage,
                    };
                    this.searchSalesAct(obj).then(resp => {
                        console.log(resp);
                        if (resp.Code === 200) {
                            this.exchangeData(resp.BusinessList)
                            this.drawLine();
                        }

                    }).catch(err => {

                    })
                }


            },
            chooseType(val) {
                this.type = val
            },
        },

    }
</script>

<style scoped>

</style>